import { useState, useEffect } from 'react';
import { history } from 'umi';
import ProCard from '@ant-design/pro-card';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Button, Col, DatePicker, Form, Input, Row, Select } from 'antd';
import styles from '../../index.less';
import moment from 'moment';
import InformationModal from '@/components/InformationModal';
import { PlusCircleOutlined } from '@ant-design/icons';

const { Option } = Select;

const addressData = [
  '南京-江苏科技金融大厦',
  '深圳-比克科技大厦',
  '北京-汉威国际三区3号楼',
  '上海-新漕河泾国际商务中心',
  '广州-高盛大厦',
];
const floorData = {
  '南京-江苏科技金融大厦': ['二层', '三层'],
  //   '深圳-比克科技大厦': ['3B05室', '1', '2'],
};

export default () => {
  const [form] = Form.useForm();
  const [companies, setCompanies] = useState(floorData[addressData[0]]);
  const [floor, setFloor] = useState(floorData[addressData[0]][0]);
  const [showSelect, setShowSelect] = useState(true);
  const [formData, setFormData] = useState({ name: '', Reserve: 0, address: '', company: '' });
  const [visible, setVisible] = useState(false);
  const [confirmLoading, setConfirmLoading] = useState(false);
  const [modalText, setModalText] = useState('');

  useEffect(() => {
    setFormData(form.getFieldsValue());
  }, [form]);

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 2 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 10 },
    },
  };

  const handleProvinceChange = (value: string | number) => {
    if (!floorData[value]) {
      setShowSelect(false);
      return;
    }
    setShowSelect(true);
    setCompanies(floorData[value]);
    setFloor(floorData[value][0]);
  };

  const onSecondCityChange = (value: any) => {
    setFloor(value);
  };

  const onFinish = (values: any) => {
    console.log('Success:', values);
    setModalText('请确认面试邀约短信内容无误，点击确认将发送短信');
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 1000);
  };

  return (
    <PageHeaderWrapper>
      <ProCard title="" bordered headerBordered direction="column" gutter={[0, 16]}>
        <Form
          style={{ marginTop: 34 }}
          {...formItemLayout}
          form={form}
          onFinish={onFinish}
          layout="horizontal"
          onValuesChange={(changedValues, allValues) => {
            if (changedValues.address === '南京-江苏科技金融大厦' || changedValues.company) {
              setFormData({ ...allValues, company: '三层', ...changedValues });
            } else {
              setFormData({ ...allValues, company: '', ...changedValues });
            }
          }}
        >
          <Form.Item label="短信模板" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="template" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">预约面试</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="渠道来源" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="channel" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">Boss</Option>
                  <Option value="2">前程无忧</Option>
                  <Option value="3">智联招聘</Option>
                  <Option value="4">拉钩</Option>
                  <Option value="5">内推</Option>
                  <Option value="6">关系户</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="沟通时间" required name="communication">
            <DatePicker style={{ width: 210 }} />
          </Form.Item>
          <Form.Item label="姓名" required name="name" initialValue="王小明">
            <Input style={{ width: 210 }} />
          </Form.Item>
          <Form.Item label="电话" required name="tel" initialValue="12332112345">
            <Input type="tel" style={{ width: 210 }} />
          </Form.Item>
          <Form.Item label="面试岗位" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="post" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">react开发工程师</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="面试地点" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="address" initialValue={addressData[0]}>
                <Select style={{ width: 210, marginRight: '14px' }} onChange={handleProvinceChange}>
                  {addressData.map((address) => (
                    <Option key={address} value={address}>
                      {address}
                    </Option>
                  ))}
                </Select>
              </Form.Item>
              {showSelect && (
                <Form.Item name="company" initialValue={floorData[addressData[0]][1]}>
                  <Select style={{ width: 210 }} value={floor} onChange={onSecondCityChange}>
                    {companies.map((company: any) => (
                      <Option key={company} value={company}>
                        {company}
                      </Option>
                    ))}
                  </Select>
                </Form.Item>
              )}
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="首次面试官" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="Interviewer" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">曹孟阳</Option>
                  <Option value="2">焦凯</Option>
                  <Option value="3">张玲烨</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="邀约人" required style={{ marginBottom: 0 }}>
            <Row>
              <Form.Item name="Inviter" initialValue="1">
                <Select style={{ width: 210 }}>
                  <Option value="1">曹孟阳</Option>
                  <Option value="2">焦凯</Option>
                  <Option value="3">张玲烨</Option>
                </Select>
              </Form.Item>
              <PlusCircleOutlined className={styles.plusCircle} />
            </Row>
          </Form.Item>
          <Form.Item label="引领地点" required name="add" initialValue="1">
            <Select style={{ width: 210 }}>
              <Option value="1">AI研发</Option>
              <Option value="2">人事部</Option>
              <Option value="3">二层休息区</Option>
              <Option value="4">二层卫生间</Option>
              <Option value="5">商务行政部</Option>
              <Option value="6">战略财务部</Option>
              <Option value="7">洽谈区</Option>
              <Option value="8">茶水间</Option>
              <Option value="9">董事长办公室</Option>
              <Option value="10">舆情BU</Option>
              <Option value="11">舆情办理办</Option>
            </Select>
          </Form.Item>
          <Form.Item label="预约面试时间" required name="Reserve">
            <DatePicker style={{ width: 210 }} />
          </Form.Item>
          <Row>
            <Col span={24} className={styles.createbtn}>
              <Button type="primary" htmlType="submit">
                提交
              </Button>
              <Button
                type="primary"
                style={{ margin: '0 8px' }}
                onClick={() => {
                  form.resetFields();
                  setShowSelect(true);
                  setFormData({...form.getFieldsValue(), company: "三层"});
                }}
              >
                重置
              </Button>
              <Button
                style={{ margin: '0 8px' }}
                onClick={() => {
                  form.resetFields();
                  history.goBack();
                }}
              >
                返回上一级
              </Button>
            </Col>
          </Row>
        </Form>
        <div className={styles.preview}>
          <span>短信预览：&nbsp;&nbsp;&nbsp;</span>
          <div className={styles.previewContent}>
            「擎盾数据」{formData.name}您好，我是「南京擎盾信息科技有限公司」的XXX，诚邀您于
            {moment(formData.Reserve).format('YY-MM-DD') ||
              Date.now() - Math.floor(Math.random() * 100000)}
            来访。 地址：「
            {formData.address}
            {formData.company}」。 <br />
            提示：
            <br />
            1.请关注公众号“擎盾法律人工智能”，回复“面试”，获取面试邀约码。
            <br />
            2.请使用【邀约码】，于前台找机器人【小法】进行面试签到。
            <br />
            3.有任何问题请与我电话联系，(用户电话），欢迎您的来访。
            <br />
          </div>
        </div>

        <InformationModal
          visible={visible}
          modalText={modalText}
          confirmLoading={confirmLoading}
          showModalBtn
          handleOk={() => handleOk()}
          onCancel={() => setVisible(false)}
        />
      </ProCard>
    </PageHeaderWrapper>
  );
};
